<template>
  <div class="markdown">
    <div class="section section-left">
      <div class="editor">
        <Codemirror
          class="code-mirror"
          v-model="code"
          :autofocus="true"
          :indentWithTab="true"
          :tabSize="2"
          :extensions="extensions"
          @ready="
            (payload) => {
              view = payload.view;
            }
          "
          :style="{
            width: '100%',
            height: '100%',
          }"
        />
      </div>
    </div>
    <div class="section section-right">
      
        <MarkdownViewer :code="code" />
      </div>
    </div>
  
</template>

<script setup lang="ts">
import { ref, shallowRef } from "vue";

import { Codemirror } from "vue-codemirror";
import { EditorView } from "@codemirror/view";
import { markdown } from "@codemirror/lang-markdown";
import { githubLight } from "@uiw/codemirror-theme-github";

import MarkdownViewer from "./MarkdownViewer.vue";

const props = defineProps({
  code: {
    type: String,
    default: "",
  },
});

let code = ref(props.code);
let extensions = [githubLight, markdown()];

let view = shallowRef({} as EditorView);
</script>

<style scoped>
.markdown {
  position: relative;
  width: 100%;
  height: 100px;
}
.section-left {
  position: absolute;
  width: 50%;
  left: 0;
  height: 100%;
}
.section-left::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 5px;
  top: 10px;
  bottom: 10px;
  border: 2px solid #808080;
  z-index: 1;
  pointer-events: none;
}
.section-right {
  position: absolute;
  width: 50%;
  right: 0;
  height: 100%;
}
.section-right::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 10px;
  top: 10px;
  bottom: 10px;
  border: 2px solid #808080;
  z-index: 1;
  pointer-events: none;
}
.editor {
  position: absolute;
  left: 10px;
  right: 5px;
  top: 10px;
  bottom: 10px;
}
</style>

<style>
.cm-focused {
  outline: none !important;
}

.editor * {
  font-family: "JetBrains Mono" !important;
}
</style>
